<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>项目仪表盘</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<div th:replace="fragments/header :: header"></div>

<div class="container mt-4">
    <h1 class="mb-4">项目仪表盘</h1>

    <div class="row">
        <div class="col-md-3 mb-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">总项目数</h5>
                    <p class="card-text display-4">12</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">进行中</h5>
                    <p class="card-text display-4">7</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">延期</h5>
                    <p class="card-text display-4">3</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <h5 class="card-title">已完成</h5>
                    <p class="card-text display-4">2</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    项目进度
                </div>
                <div class="card-body">
                    <canvas id="projectChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    近期任务
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <span class="badge bg-primary rounded-pill">高优先级</span>
                            完成前端界面设计
                        </li>
                        <li class="list-group-item">
                            <span class="badge bg-secondary rounded-pill">中优先级</span>
                            编写API文档
                        </li>
                        <li class="list-group-item">
                            <span class="badge bg-warning rounded-pill">低优先级</span>
                            优化数据库查询
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="fragments/footer :: footer"></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('projectChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['项目A', '项目B', '项目C', '项目D', '项目E'],
                datasets: [{
                    label: '完成百分比',
                    data: [65, 59, 80, 81, 56],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    });
</script>
</body>
</html>